<template>
  <div>
    <Row>
      <Col :span="16" :offset="4">
        <Form v-model="addbanner" ref="addbanner" :label-width="100">
          <FormItem label="Banner名称">
            <Input type="text" v-model="addbanner.name" placeholder="请输入Banner名称" />
          </FormItem>
          <FormItem label="Banner简介">
            <Input type="textarea" v-model="addbanner.desc" placeholder="请输入Banner简介" />
          </FormItem>
          <FormItem label="Banner图">
            <!-- <Input type="text" v-model="addbanner.title" placeholder="请输入成员的职位名称" /> -->
            <Upload action="/adminapi/singleupload" name="uploadimg" :on-success="handleSuccess">
              <Button icon="ios-cloud-upload-outline">点击此处上传</Button>
            </Upload>
          </FormItem>
          <FormItem label="Banner状态">
            <Select v-model="addbanner.type">
              <Option label="正常" value="1"></Option>
              <Option label="关闭" value="2"></Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="addBanner">提交</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  layout: 'admin',
  data() {
    return {
      addbanner: {
        name: '',
        desc: '',
        imgurl: '',
        status: '1'
      }
    }
  },
  methods: {
    addBanner() {
      this.$axios.post('/adminapi/addBanner', this.addbanner).then(res => {
        if (res.data.code == 200) {
          this.$Message.success('新Banner添加成功')
          this.$router.replace('/admin/banner')
        } else {
          this.$Message.error('添加失败，稍后重试')
        }
      }).catch(err => {
        this.$Message.error('网络错误，请稍后重试')
      })
    },
    handleSuccess(res, file, filelist) {
      console.log(res, file, filelist)
      if (res.code == 200) {
        this.addbanner.imgurl = res.detail.path
        this.$Message.success('Banner上传成功！')
      } else {
        this.$Message.error('Banner上传错误，请刷新页面后重试')
      }
    }
  }
}
</script>
